import { CSSProperties, memo, useState } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
  Card,
  Descriptions,
  Image,
  message,
  Popconfirm,
  Skeleton,
  Tabs,
  TabsProps,
  Tooltip,
} from 'antd';
import { API_BASEURL } from '@/constants/api';
import { resAddOrCancelFollow, resIsFollow } from '@/services/follow';
import { resUserinfoAdmin } from '@/services/user';
import { userStore } from '@/store/userStore';
import {
  EditOutlined,
  EllipsisOutlined,
  HeartFilled,
  HeartOutlined,
  MessageOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { useRecoilValue } from 'recoil';
import FansPage from '@/pages/Profile/components/Fans';
import FollowPage from '@/pages/Profile/components/Follow';
import '@/pages/Profile/components/Userinfo/index.scss';
import GoodsList from "@/pages/UserPage/GoodsList";

const createItems = (refreshCount: number,id:number): TabsProps['items'] => {
  return [
    {
      label: '商品列表',
      key: 'goods',
      children: <GoodsList id={id} />,
    },
    {
      label: '关注列表',
      key: 'follow',
      children: <FollowPage showTitle={false} refreshCount={refreshCount} />,
    },
    {
      label: '粉丝列表',
      key: 'fans',
      children: <FansPage showTitle={false} refreshCount={refreshCount} />,
    },
  ];
};

const UserPage: FC<PropsWithChildren<{}>> = () => {
  const user = useRecoilValue(userStore);
  const params = useParams();
  const id = Number(params.id) || user.id;
  console.log(id)

  const {
    data: isFollow,
    refresh: followRefresh,
    loading: followLoading,
  } = useRequest(resIsFollow, {
    defaultParams: [id],
  });

  const { data, loading, refresh } = useRequest(resUserinfoAdmin, {
    defaultParams: [id],
  });

  const [refreshCount, setRefreshCount] = useState(0);

  const navigate = useNavigate();

  const items = createItems(refreshCount,id);

  const cardStyle: CSSProperties = {
    width: 216,
  };
  return (
    <div className={'w-[1200px] flex m-auto p-8 bg-white rounded-xl'}>
      {data && isFollow && (
        <div className={'rounded-lg p-4 mb-4'}>
          <Card
            style={cardStyle}
            hoverable
            cover={
              <div className={'p-2'}>
                <Image src={API_BASEURL + '/' + data.avatar} width={200} />
              </div>
            }
            actions={[
              <Popconfirm
                title={
                  isFollow.is_check
                    ? '您确定要取消此关注吗?'
                    : '您确定要关注此用户吗?'
                }
                cancelText="取消"
                okText="确定"
                onConfirm={() => {
                    resAddOrCancelFollow(id).then(() => {
                      message.success(
                        isFollow.is_check ? '取消关注成功！' : '关注成功'
                      );
                      followRefresh();
                      setRefreshCount((preState) => {
                        return ++preState;
                      });
                    });
                }}
              >
                <Tooltip title={isFollow.is_check ? '取消关注' : '关注'}>
                  {isFollow.is_check ? (
                    <HeartFilled disabled={followLoading} />
                  ) : (
                    <HeartOutlined disabled={followLoading} />
                  )}
                </Tooltip>
              </Popconfirm>,
              <Tooltip title={'发送信息'}>
                <MessageOutlined
                  key={'message'}
                  onClick={() => {
                    navigate('/message');
                  }}
                />
              </Tooltip>,
            ]}
          >
            <Skeleton loading={loading} active>
              <Descriptions column={1} size={'small'}>
                <Descriptions.Item label={'昵称'} className={'userinfo-item'}>
                  <span className={'text-black font-bold text-base'}>
                    {data.name}
                  </span>
                </Descriptions.Item>
                <Descriptions.Item label={'签名'}>
                  {data.sign}
                </Descriptions.Item>
              </Descriptions>
            </Skeleton>
          </Card>
        </div>
      )}
      <div className={'bg-white p-8 shadow-lg min-h-[75vh] flex-1 '}>
        <Tabs
          items={items}
          type={'card'}
          size={'large'}
          defaultValue={'goods'}
        />
      </div>
    </div>
  );
};

export default memo(UserPage);
